<template>
  <view class="user-header">
    <view class="user-profile" @click="toLogin">
      <image
        class="head-image"
        :src="userInfo.avatar"
        mode=""
        v-if="userInfo.avatar"
      ></image>
      <image class="head-image" :src="avatar" v-else></image>
    </view>
    <view class="user-info" @click="toLogin">
      <view class="user-nickname">
        <text v-if="userInfo.userid">{{ userInfo.nickname }}</text>
        <text v-else>立即登录</text>
      </view>
      <view class="license-num">
        <text v-if="userInfo.userid"></text>
        <text v-else>登录可体验更多功能</text>
      </view>
      <view class="vip">
        <view class="vip-text">
          <text class="vip-text-no">欢迎使用E-Selina</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from "vue";
const avatar = ref("/static/images/login/JGSL-denglutouxiang@3x.png");
import useUserStore from "@/store/user.js";
import { storeToRefs } from "pinia";
const userStore = useUserStore();
const { userInfo } = storeToRefs(userStore); // 响应式
onMounted(() => {});
const toLogin = () => {
  if (!userInfo.value.userid) {
    uni.navigateTo({
      animationType: "pop-in",
      url: "/pages/login/login",
    });
  }
};
</script>

<style lang="scss" scoped>
.user-header {
  // padding: 0 32upx;
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  margin-bottom: 56rpx;
  .user-profile {
    width: 160upx;
    height: 160upx;
    margin-right: 30upx;
    border-radius: 50%;
    overflow: hidden;
    border: 4upx solid #ffffff;
    position: relative;
    .head-image {
      position: relative;
    }
    .set-tip {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      background-image: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 0.4) 100%
      );
      display: flex;
      justify-content: center;
      align-items: center;
      color: #ffffff;
      font-size: 24rpx;
      height: 52rpx;
    }
  }
  .user-info {
    display: flex;
    flex-direction: column;
    .user-nickname {
      font-size: 36upx;
      line-height: 36upx;
      font-weight: 500;
      color: #333333;
    }
    .license-num {
      margin-top: 16upx;
      font-size: 28upx;
      line-height: 28upx;
      font-weight: 500;
      color: #8d8d8d;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      width: 504rpx;
    }
  }
  .vip {
    margin-top: 16upx;
    display: flex;
    height: 36upx;
    align-items: center;
    &-icon {
      width: 36upx;
      height: 32upx;
      margin-right: 8upx;
    }
    &-text {
      font-size: 24upx;
      &-is {
        color: #fea547;
      }
      &-no {
        color: #cccccc;
      }
    }
    &-renew {
      margin-left: 8upx;
      width: 88upx;
      height: 32upx;
      display: flex;
      align-items: center;
      justify-content: center;
      background: linear-gradient(270deg, #f8764f 0%, #ffbf5f 100%);
      border-radius: 20upx;
      color: #ffffff;
      font-size: 20upx;
      text-align: center;
      padding-left: 6upx;
      &-icon {
        // margin-left: 4upx;
      }
    }
  }
}
</style>
